<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Forge Model Derivative API Sample</title>
    <!-- Autodesk Forge Viewer files -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
    <!-- Custom stylesheets and scripts -->
    <link rel="stylesheet" href="/css/jstree.style.min.css" />
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css" />
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.storageapi.min.js"></script>
    <script src="/js/scripts.js"></script>
    <script src="/js/jstree.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/libraries/clipboard.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="jumbotron">
            <h3>Model Derivative API Sample</h3>
            <h4>Show the entire list of
                <span class="glyphicon glyphicon-inbox"></span> Hubs,
                <span class="glyphicon glyphicon-list-alt"></span> Projects,
                <span class="glyphicon glyphicon-folder-open"></span> Folders,
                <span class="glyphicon glyphicon-briefcase"></span> Items and
                <span class="glyphicon glyphicon-time"></span> Versions under your
                account.</h4>
            <h4>Select an item version to show a file using <a href="https://developer.autodesk.com/api/viewerapi/">
                    Autodesk Viewer</a>
            </h4>
            <div class="row">
                <div class="col-sm-3" style="height:40px">

                    <a href="#" id="authenticate" class="btn btn-warning btn-block">
                        <span class="glyphicon glyphicon-user"></span>
                        Log In
                    </a>
                </div>
                <div class="col-sm-3" style="height:40px">
                    <div id="wipVsStorage" class="btn btn-primary active" data-toggle="button" aria-pressed="false"
                        autocomplete="off" style="font-size: 10pt; visibility: hidden;">
                        <span id="wipVsStorageText">Use WIP (instead of Storage)</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3" style="height:40px">
                    <div id="progressInfo" class="btn btn-info" style="font-size: 10pt ">
                        <span id="progressInfoText">Progress info</span>
                        <span id="progressInfoIcon"></span>
                    </div>
                </div>
            </div>
            <div class="row">

            </div>
            <div class="row" style="background: white">
                <div class="col-sm-3 forgeTreeContainer">
                    <div id="forgeFiles">

                    </div>
                    <div id="forgeUpload" class="forgeControlContainer">
                        <div style="display: inline-block">
                            <a id="uploadFile" class="btn btn-warning" disabled>
                                <span class="glyphicon glyphicon-open-file"></span>
                                Upload attachment
                            </a>
                        </div>
                        <input type="file" id="forgeUploadHidden" name="file" />
                    </div>
                </div>
                <div class="col-sm-4 forgeTreeContainer" style="position: relative">
                    <div id="forgeHierarchy" class="forgeControl"></div>
                    <div id="forgeFileOptions" class="forgeControlContainer" style="height:50px; overflow: hidden;">

                        <div style="display: inline-block">
                            <select id="forgeFormats" class="input-small form-control" style="width:90px">
                            </select>
                        </div>

                        <div style="display: inline-block">
                            <a id="downloadExport" class="btn btn-warning">
                                <span class="glyphicon glyphicon-save-file"></span>
                                Download
                            </a>
                        </div>

                        <div style="display: inline-block">
                            <a id="deleteManifest" class="btn btn-warning">
                                <span class="glyphicon glyphicon-trash"></span>
                                Delete
                            </a>
                        </div>
                    </div>
                    <div id="forgeProperties" class="forgeControl"></div>
                </div>

                <div class="col-sm-5 forgeViewer">
                    <div id="forgeViewer"></div>
                </div>
            </div>
        </div>
    </div>

    <iframe id="fusionLoader" width="1" height="1" style="visibility:hidden"></iframe>

    <!-- Modal Provision BIM360  -->
    <div class="modal fade" id="provisionAccountModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Cancel"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Thanks for using BIM 360 File Sharing!</h4>
                </div>
                <div class="modal-body">
                    <p>To view your BIM 360 Docs files on this app please authorize my Forge Client ID with your BIM 360
                        Docs
                        Account.</p>
                    <p>
                        <button type="button" class="btn btn-info" data-toggle="modal"
                            data-target="#provisionAccountStepsModal">
                            Show
                            me the steps <span class="glyphicon glyphicon-new-window"></span></button>
                    </p>
                    Use this as Forge Client ID:
                    <div class="input-group">
                        <input type="text" readonly="true" aria-describedby="CopyClientID" id="ClientID"
                            class="form-control" value="" />
                        <span class="input-group-addon" style="cursor: pointer" data-clipboard-target="#ClientID"
                            id="CopyClientID">Copy to clipboard</span>
                    </div>
                    And this App Name:
                    <div class="input-group">
                        <input type="text" readonly="true" aria-describedby="CopyAppName" id="AppName"
                            class="form-control" value="BIM 360 File Sharing" />
                        <span class="input-group-addon" style="cursor: pointer" data-clipboard-target="#AppName"
                            id="CopyAppName">Copy to clipboard</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="provisionAccountSave">Done</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Provision BIM360 Help  -->
    <div class="modal fade" id="provisionAccountStepsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Cancel"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel1">Step-by-step guide</h4>
                </div>
                <div class="modal-body">
                    <p>To access your BIM 360 Docs files with this app, you need to connect your BIM 360 account with
                        the app.</p>
                    <ol>
                        <li>Log in to <a href="https://bim360enterprise.autodesk.com/" target="_blank">BIM 360 Account
                                Administration</a>. Note that you need account administrator permissions.
                        </li>
                        <li>If you have more than one account, select the account you want to integrate with the app.
                        </li>
                        <li>From the toolbar, select <strong>SETTINGS &gt; Apps &amp; Integrations</strong>.<br />
                            <img src="/img/provisioning/Step1.png" width="500" /></li>
                        <li>Click the <strong>Add Integration</strong> button.<br />
                            <img src="/img/provisioning/Step2.png" />
                        </li>
                        <li>Select <strong>BIM 360 Account Administration</strong> and <strong>BIM 360 Docs</strong>,
                            and click
                            <strong>Next</strong>.
                        </li>
                        <li>Select <strong>I’m the developer</strong>, and click <strong>Next</strong>.</li>
                        <li>In the <strong>Forge Client ID</strong> and <strong>App Name</strong> fields, enter the
                            Forge client ID
                            and app name provided by the app retailer.
                        </li>
                        <li>Select the <strong>I have saved the Account ID information securely</strong> checkbox.</li>
                        <li>Click <strong>Save</strong>.</br>
                            <img src="/img/provisioning/Step3.png" width="500" />
                        </li>
                        <p></p>
                        <p>Congratulations! You can now access your BIM 360 Docs files.</p>
                    </ol>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Understood, thanks!</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Clipboard('.input-group-addon');
    </script>

    <iframe id="hiddenFrame" style="visibility: hidden" />

</body>

</html>